<template>
    <div class="cate">
        <div class="cate-header-scroller">
            <scrollerTransverse :data="items" v-model="scrollerLeft" v-on:category="category" class="cate-header-scroller-nav"></scrollerTransverse>
        </div>

        <div class="cate-content" ref="elcontent" id="elcontent">
           <loading :isShow="showLoading" style="height:calc(100% - 60px)"></loading>
            <scroller lock-x scrollbar-y use-pullup use-pulldown height="100%" @on-pullup-loading="loadMore" @on-pulldown-loading="refresh" v-model="status" ref="scroller">
                <div>
                    <div class="cate-list-row yyt-list" style="display: inline-block;margin-bottom: 16px;">
                        <div class="cate-list-row-col" v-for="(item,$index) in list" @click="goDetail(item.id)">
                            <div class="cate-list-content" v-bind:style="{marginLeft: ($index+1)%2==0 ? 'auto':''}">
                                <div class="cate-list-img">
                                    <img :src="item.imageUrl">
                                    <!-- <x-img :src="item.imageUrl" :scroller="$refs.scroller"></x-img> -->
                                </div>
                                <div class="cate-list-items ">
                                    <div class="cate-list-items-name">
                                        {{item.goodsName}}
                                    </div>
                                    <div class="cate-list-items-end ">
                                        <div class="yyt-item-panl-flx yyt-item-flex ">
                                            <div class="yyt-item-panl-flx-left">
                                                <span class="yyt-item-panl-flx-left-now-text">￥25.45</span>
                                                <span class="yyt-item-panl-flx-left-obsolete-text">￥25.45</span>
                                            </div>
                                            <div class="yyt-item-panl-flx-right" style=" width: 1.167rem;">
                                                <span class="yyt-item-panl-flx-right-cate">促销价</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                 <!--pulldown slot-->
      <div slot="pulldown" class="xs-plugin-pulldown-container xs-plugin-pulldown-down" style="position: absolute; width: 100%; height: 60px; line-height: 60px; top: -60px; text-align: center;">
        <span v-show="status.pulldownStatus === 'default'"></span>
        <span class="pulldown-arrow" v-show="status.pulldownStatus === 'down' || status.pulldownStatus === 'up'" :class="{'rotate': status.pulldownStatus === 'up'}">↓</span>
        <span v-show="status.pulldownStatus === 'loading'">
          <spinner type="ios-small"></spinner>
        </span>
      </div>
      <!--pullup slot-->
      <div slot="pullup" class="xs-plugin-pullup-container xs-plugin-pullup-up" style="position: absolute; width: 100%; height: 40px; bottom: -40px; text-align: center;">
        <span v-show="status.pullupStatus === 'default'"></span>
        <span class="pullup-arrow" v-show="status.pullupStatus === 'down' || status.pullupStatus === 'up'" :class="{'rotate': status.pullupStatus === 'up'}">↑</span>
        <span v-show="status.pullupStatus === 'loading'">
          <spinner type="ios-small"></spinner>
        </span>
        <div v-show="status.pullupStatus != 'loading'&&status.pullupStatus != 'default'">
          <load-more :show-loading="false" :tip="'我是底线'" background-color="#fbf9fe"></load-more>
        </div>
      </div>
            </scroller>
        </div>

    </div>
</template>
<script>
import { Grid, GridItem,LoadMore,Spinner } from "vux";
import scrollerTransverse from "@/components/vue-scroller-transverse";
import { scrollTo } from "@/utils/tool";
import { HashMap } from "@/utils/hashMap";
import { category, categoryList } from "@/api/category";
import { token_expires, count_expires } from "@/utils/Keyword";
import Scroller from "@/components/scroller";
import XImg from "@/components/x-img";
import loading from "@/components/loading";
import { setTimeout } from 'timers';
export default {
  components: {
    Grid,
    GridItem,
    scrollerTransverse,
    Scroller,
    XImg,
    LoadMore,
    Spinner,
    loading
  },
  data() {
    return {
      showLoading:false,
      items: [],
      list: [],
      scrollerLeft: 0,
      form: {
        categoryId: "",
        shopId: 18,
        from: 0,
        size: 10
      },
      status: {
        pullupStatus: "default",
        pulldownStatus: "default"
      }
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      if (vm && vm.scrollerLeft) {
        //通过vm实例访问this
        setTimeout(function() {
          let val = HashMap.get(to.fullPath);
          vm.scrollerLeft = val;
        }, 0); //同步转异步操作
      }
    });
  },
  beforeRouteLeave(to, from, next) {
    this.$nextTick(() => {
      let el = this.scrollerLeft;
      let val = HashMap.get(from.fullPath);
      if (val) {
        HashMap.remove(from.fullPath);
      }
      console.log(el);
      HashMap.put(from.fullPath, el);
      next();
    });
  },
  mounted() {
    this.init();
    this.showLoading=true;
  },
  methods: {
    init() {
      this.getCate();
    },
    getCate() {
      category(18).then(res => {
        if (res == token_expires) {
          this.getCate();
        } else {
          this.items = res.category;
          this.categoryList(res.category[0].categoryId);
        }
      });
    },
    categoryList(id, cate) {
      let _this=this;
      if (id) {
        this.form.categoryId = id;
      }
      
      categoryList(this.form).then(res => {
        this.$refs.scroller.donePulldown();
       
        if (res == token_expires) {
          this.categoryList()
        } else {
          if (cate == "refresh") {
            this.list = [];
            this.$refs.scroller.reset({
            top: 0
          },200,"ease-in")
          }
          this.list = this.list.concat(res.page.data);
             _this.showLoading=false;
        //  this.$refs.scroller.donePullup();
          if (res.page.data.length < 10) {
            this.$refs.scroller.disablePullup();
          }
        }
      });
    },
    category(data) {
      this.form.from = 0;
      this.showLoading=true;
      this.categoryList(data.categoryId, "refresh");
    },
    refresh() {
      this.$refs.scroller.enablePullup();
      this.form.from = 0;
      this.categoryList("", "refresh");
    },
    loadMore() {
        this.form.from ++;
      this.categoryList("", "loadMore");
    },
      goDetail(id) {
      this.navigation_push("commodityDetail", { id: id });
    },
  }
};
</script>
<style lang="scss" scoped>
.cate {
  background-color: #f0f0f0;
  height: 100%;
  .cate-header-scroller {
    .cate-header-scroller-nav {
      background-image: url(./../../assets/images/navback.png);
      color: #ffffff;
      font-size: 0.4rem;
      font-weight: 500;
      background-size: 100%;
    }
  }
  .yyt-item-panl-flx-left-now-text {
    font-size: 0.4rem;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: rgba(243, 9, 1, 1);
  }
  .cate-content {
    height: calc(100vh - (53px + 1.0667rem));
    //height: 100%;
    // overflow: auto;
    .cate-list-content {
      width: 4.9333rem;
      //   margin: auto;
      background-color: white;
      padding-bottom: 0.4133rem;
    }
    .cate-list-items {
      padding: 0 0.2133rem;
    }
    .cate-list-items-end {
      margin-top: 0.32rem;
    }
    .cate-list-items-name {
      font-size: 0.3467rem;
      font-weight: 400;
      color: #333333;
      margin-top: 0.1333rem;
      height: 1.3rem;
      line-height: 0.6rem;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .cate-list-row {
      .cate-list-row-col {
        width: 50%;
        float: left;
        margin-top: 0.1333rem;
      }
    }
    .cate-list-img {
      img {
        width: 4.9333rem;
        height: 4.9333rem;
      }
    }
  }
}
</style>

